<template>
    <div>
        <itemMusicTop :playlist="state.playList"/>
        <itemMusicList :itemlist="state.itemList" :subscribedCount="state.playList.subscribedCount"/>
    </div>
</template>

<script>
    import {useRoute} from 'vue-router' //zai router-link中通过query传递的参数使用useRoute()来获取到
    import {onMounted, reactive} from 'vue'
    import {getMusicItemList,getItemList} from '@/request/api/item.js'
    import itemMusicTop from '../components/item/itemMusicTop.vue'
    import itemMusicList from '../components/item/itemMusicList.vue'
    export default {
        setup(){
            const state=reactive({
                playList:{}, //歌单详情页数据
                itemList:{}, //歌单的歌曲
            })
            onMounted(async ()=>{
                // console.log(useRoute())
                let id=useRoute().query.id
                // console.log(id);
                // 获取歌单详情
                let res=await getMusicItemList(id)
                // console.log(res)
                state.playList=res.data.playlist
                // 获取歌单歌曲
                let result=await getItemList(id)
                console.log(result)
                state.itemList=result.data.songs
                // 防止页面刷新，数据丢失，将数据保存到sessionStorage中
                // sessionStorage.setItem('itemDetail',Json.stringify(state))
            })
            return{state}
        },
        components:{
            itemMusicTop,
            itemMusicList
        }
    }
</script>

<style>

</style>